<template>
    <div class="wrap">
        <div>
            <el-upload class="upload-demo"
                       ref="upload"
                       :multiple="false"
                       :drag="true"
                       :auto-upload="false"
                       :file-list="files"
                       :on-change="getFile"
                       :on-remove="removeFile"
                       :limit="fileLimitNum"
                       :on-exceed="handleExceed"
                       :before-upload="beforeImport"
                       @dragenter.native.stop.prevent
                       @dragover.native.stop.prevent
                       @drop.native.stop.prevent="handleFileDrop($event)">
                <div class="upload-demo-info">
                    <em class="el-icon-upload upload-icon"/>
                    <div class="el-upload__text">{{ $t('message.FastenerInfoImportDlg.dragHere') }}
                        <em>{{ $t('message.FastenerInfoImportDlg.clickUpload') }}</em>
                    </div>
                </div>
            </el-upload>
            <div v-if="errMsg !== ''" class="text-danger mt-2">{{ errMsg }}</div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="importElectricalCable">
                {{ $t('message.ElectricalCableImportDlg.Import') }}
            </el-button>
            <el-button @click="close">{{ $t('message.ElectricalCableImportDlg.close') }}</el-button>
        </div>
    </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {fastenerStatisticsCommand} from "../../../command/FastenerStatisticsCommand";
import {electricalCableCommand} from "../../../command/ElectricalCableCommand";

export default {
    mixins: [DialogMixin],
    name: "FastenerInfoImportDlg",
    data() {
        return {
            files: [],
            fileType: ['xml'],
            fileLimitNum: 1,
            errMsg: '',
            importDisabled: true,

        }
    },
    watch: {},
    computed: {},
    created() {
    },
    mounted() {
        electricalCableCommand.init(500, 300, 500, () => {

        });
    },
    methods: {
      //关闭
      close() {
        electricalCableCommand.closeActiveCmd();
      },
      //文件超出数量限制的
      handleExceed(file, fileList) {
        electricalCableCommand.eventBusAlertMsg('一次只能上传一个文件', 'warning');
      },
      //文件状态改变时需要调用：添加文件、上传成功/失败都会调用
      getFile(file, fileList) {
        let filetype = this.getFileType(file.name);
        if (filetype !== 'xml') {
          this.errMsg = this.$t('message.ElectricalCableImportDlg.importTypeError');
          this.importDisabled = true;
        } else {
          this.files.push(fileList[0]);
          this.errMsg = '';
          this.importDisabled = false;
        }
      },
      //获取上传文件的文件类型
      getFileType(fileName) {
        let delimiterIndex = fileName.lastIndexOf('.');
        return fileName.substring(delimiterIndex + 1).toLowerCase();
      },
      handleFileDrop(event) {
        // debugger
        // for (let i = 0; i < event.dataTransfer.items.length; i++) {
        //     let item = event.dataTransfer.items[i];
        //     let file = item.getAsFile();
        //     if (item.webkitGetAsEntry().isDirectory) {
        //         file.isDirectory = true;
        //         this.errorMessage = this.$t('message.PointCloud.importType');
        //     } else {
        //         file.isDirectory = false;
        //     }
        // }
      },
      removeFile(file, fileList) {
        this.files = [];
        this.errMsg = '';
        this.importDisabled = true;
      },
      //上传前校验
      beforeImport(file) {
        //TODO 上传前的校验类型
        return true;
      },

      async importElectricalCable() {
        //xml文件导入,进行解析
        let xmlString = await electricalCableCommand.readXmlFile(this.files[0]);
        //解析xml字符串
        let xmlParam = electricalCableCommand.xmlStringAnalysis(xmlString);
        //let xmlParam = [];

        let res = await electricalCableCommand.createElectricalCable(xmlParam);
      },

      changePluginContainerHeight() {
        electricalCableCommand.changePluginContainerHeight({
          minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight
        });
      },

    },
}
</script>

<style scoped>
.wrap {
    font-size: 12px;
}

.upload-icon {
    font-size: 2em;
    margin: 0;
    color: #C0C4CC;
}
</style>